<template>
  <div class="box">
    <div class="left">
      <div class="list">
        <div style="padding-top: 0px">排名</div>
        <div>项目名称</div>
        <div>交付数/未交付(套)</div>
        <div class="flex jcc">
          <div>剩余交付(套)</div>
          <div class="triangle">
            <img src="@/assets/img/bjBuilding/up.png" alt="" srcset="" @click="dateSortStr(1, 1)" />
            <img src="@/assets/img/bjBuilding/down.png" alt="" srcset="" @click="dateSortStr(1, 2)" />
          </div>
        </div>
        <div class="flex jcc">
          <div>交付率</div>
          <div class="triangle">
            <img src="@/assets/img/bjBuilding/up.png" alt="" srcset="" @click="dateSortStr(2, 1)" />
            <img src="@/assets/img/bjBuilding/down.png" alt="" srcset="" @click="dateSortStr(2, 2)" />
          </div>
        </div>
        <div>项目地址</div>
      </div>
      <div class="list" v-for="(item, index) in selectDeliverRankingData" :key="index">
        <div style="padding-top: 0px">{{ ++index }}</div>
        <div>{{ item.projectName }}</div>
        <div class="propressWidth">
          <el-tooltip class="item" effect="dark" :content="'应交付' + item.yjfjd + '套'" placement="top">
            <div class="m-list" :style="{ width: item.yjfjd + '%' }"></div>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" :content="'未交付' + item.yjjfjd + '套'" placement="top">
            <div class="m-list" :style="{ width: item.yjjfjd + '%' }"></div>
          </el-tooltip>
        </div>
        <div>{{ item.residueDeliver }}</div>
        <div>{{ item.deliverRatio }}%</div>
        <div>{{ item.projectAddress }}</div>
      </div>
      <!-- <div class="paging">
             <span @click="sub"><</span>{{ current }}<span @click="add">></span>
            </div> -->
      <el-pagination
        layout="prev, pager, next"
        v-model:current-page="current"
        :page-size="PageSize"
        :total="total"
        @current-change="handleCurrentChange"
      ></el-pagination>
    </div>
  </div>
</template>

<script setup>
import { ref, defineProps, onMounted, watch } from "vue";
import { selectProjectDeliverySchedule } from "@/api/bjBuilding";

const props = defineProps({
  parms: Object,
});

watch(props.parms, (val) => {
  useSelectDeliverRanking();
});

var current; //当前页
const PageSize = ref(15); //每页显示数据
const total = ref(null); //总数据
const selectDeliverRankingData = ref(null);

// 获取开发商交付排名
const useSelectDeliverRanking = async () => {
  await selectProjectDeliverySchedule(props.parms).then((res) => {
    if (res.code == 0) {
      res.data.records.forEach((item) => {
        item.yjfjd = 100 - parseInt(item.deliverRatio);
        item.yjjfjd = parseInt(item.deliverRatio);
      });
      current = res.data.current;
      total.value = res.data.total;
      selectDeliverRankingData.value = res.data.records;
    }
  });
};
// 选择剩余交付/交付率的升序降序
const dateSortStr = (a, b) => {
  if (props.parms.sortField == a && props.parms.sortWay == b) return;
  props.parms.sortField = a;
  props.parms.sortWay = b;

  useSelectDeliverRanking();
};
// 分页
const handleCurrentChange = (newPage) => {
  props.parms.pageNumber = newPage;
  useSelectDeliverRanking();
};

onMounted(() => {
  useSelectDeliverRanking();
});

const someMethod = () => {
  return {
    selectDeliverRankingData,
    current,
    total,
    PageSize,
  };
};
</script>
<style scoped lang="less">
.box {
  padding: 10px 15px 5px 15px;
  box-sizing: border-box;
  display: flex;
  position: relative;
  box-sizing: border-box;
  height: 675px;
  .left {
    font-size: 14px;
    color: rgba(151, 171, 234, 1);
    // display: flex;
    // flex-direction: column;
    // justify-content: space-evenly;
    //  padding-bottom: 22px;
  }
}
.list {
  display: flex;
}

.list:first-child {
  padding-bottom: 20px;
}
.list:not(:first-child) {
  padding: 8px 0px;
}
.list:not(:first-child) > div:first-child {
  text-align: center;
}
.list:not(:first-child) > div:last-child {
  text-align: center;
}
.list > div:first-child {
  width: 50px;
  text-align: center;
}
.list > div:nth-child(2) {
  width: 160px;
  white-space: nowrap; /* 防止文本换行 */
  overflow: hidden; /* 隐藏超出容器的内容 */
  text-overflow: ellipsis; /* 当文本溢出时显示省略号 */
  cursor: pointer;
}
.list > div:nth-child(3) {
  width: 330px;
}
.list > div:nth-child(4) {
  width: 140px;
  text-align: center;
}
.list > div:nth-child(5) {
  width: 100px;
  text-align: center;
}
.list > div:nth-child(6) {
  width: 100px;
  text-align: center;
}
.m-list {
  font-size: 12px;
  color: #e9e9e9;
  height: 20px;
}

.m-list:first-child {
  background-image: linear-gradient(to right, rgba(139, 88, 229, 1), rgba(181, 146, 243, 1));
  display: inline-block;
}
.m-list:last-child {
  background-image: linear-gradient(to right, rgba(255, 113, 57, 1), rgba(255, 153, 79, 1));
  display: inline-block;
}
.zx {
  width: 8px;
  height: 15px;
  position: relative;
  top: 3px;
  left: 3px;
  img {
    width: 100%;
    height: 100%;
  }
}

.finger {
  cursor: pointer;
}
.triangle {
  position: relative;
  left: 2px;
}
::v-deep .el-pagination {
  position: absolute;
  right: 5px;
  bottom: 5px;
  li {
    background: rgba(7, 68, 153, 0);
  }
  button {
    background: rgba(7, 68, 153, 0);
  }
  .btn-prev {
    background: rgba(7, 68, 153, 0) !important;
  }
  .is-last {
    background: rgba(7, 68, 153, 0) !important;
  }
}
</style>
<!-- <style lang="less"></style> -->
